import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

const DebugLogin = () => {
  const [debugInfo, setDebugInfo] = useState([]);
  const navigate = useNavigate();

  const addDebugInfo = (message) => {
    console.log('[DebugLogin]', message);
    setDebugInfo(prev => [...prev, `${new Date().toLocaleTimeString()}: ${message}`]);
  };

  useEffect(() => {
    addDebugInfo('DebugLogin组件已挂载');
    
    // 检查各种依赖
    try {
      addDebugInfo('检查React Router...');
      if (navigate) {
        addDebugInfo('✓ React Router正常');
      } else {
        addDebugInfo('✗ React Router异常');
      }

      addDebugInfo('检查localStorage...');
      const testToken = localStorage.getItem('admin_token');
      addDebugInfo(`✓ localStorage正常，当前token: ${testToken || '无'}`);

      addDebugInfo('检查Ant Design...');
      import('antd').then(() => {
        addDebugInfo('✓ Ant Design加载成功');
      }).catch(err => {
        addDebugInfo(`✗ Ant Design加载失败: ${err.message}`);
      });

      addDebugInfo('检查API模块...');
      import('../utils/api').then((apiModule) => {
        addDebugInfo('✓ API模块加载成功');
        if (apiModule.authAPI && apiModule.authAPI.login) {
          addDebugInfo('✓ authAPI.login方法存在');
        } else {
          addDebugInfo('✗ authAPI.login方法不存在');
        }
      }).catch(err => {
        addDebugInfo(`✗ API模块加载失败: ${err.message}`);
      });

    } catch (error) {
      addDebugInfo(`检查过程中出错: ${error.message}`);
    }
  }, [navigate]);

  const testLogin = () => {
    addDebugInfo('开始测试登录...');
    localStorage.setItem('admin_token', 'debug-test-token');
    addDebugInfo('已设置测试token');
    navigate('/dashboard');
  };

  const clearToken = () => {
    localStorage.removeItem('admin_token');
    addDebugInfo('已清除token');
  };

  return (
    <div style={{
      padding: '20px',
      fontFamily: 'monospace',
      background: '#f5f5f5',
      minHeight: '100vh'
    }}>
      <h2>登录调试页面</h2>
      
      <div style={{ marginBottom: '20px' }}>
        <button 
          onClick={testLogin}
          style={{
            padding: '10px 20px',
            marginRight: '10px',
            background: '#1890ff',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          设置测试Token并跳转
        </button>
        
        <button 
          onClick={clearToken}
          style={{
            padding: '10px 20px',
            background: '#ff4d4f',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          清除Token
        </button>
      </div>

      <div style={{
        background: 'white',
        padding: '15px',
        borderRadius: '4px',
        border: '1px solid #d9d9d9',
        maxHeight: '400px',
        overflowY: 'auto'
      }}>
        <h3>调试信息:</h3>
        {debugInfo.map((info, index) => (
          <div key={index} style={{ 
            padding: '2px 0',
            borderBottom: '1px solid #f0f0f0',
            fontSize: '12px'
          }}>
            {info}
          </div>
        ))}
      </div>

      <div style={{
        marginTop: '20px',
        padding: '15px',
        background: 'white',
        borderRadius: '4px',
        border: '1px solid #d9d9d9'
      }}>
        <h3>环境信息:</h3>
        <p>当前URL: {window.location.href}</p>
        <p>User Agent: {navigator.userAgent}</p>
        <p>React版本: {React.version}</p>
      </div>
    </div>
  );
};

export default DebugLogin;